import React from 'react'
import { Panel, Cells, Cell, CellBody, Button, CellFooter } from 'react-weui'
import Slider from 'react-slick'

 class ProductInfo extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			goods: {},
			image: [],
		}
	}
	componentWillReceiveProps(nextProps) {
		if(nextProps.goodData.goods) {
			this.setState({ 
				goods: nextProps.goodData.goods,
				image: nextProps.goodData.image
			})
		}
	} 
	render() {
	var settings = {
       	dotsClass: 'slick-dots slick-thumb',
		infinite: true,
		slidesToShow: 1,
		slidesToScroll: 1,
    };
	const { image, goods } = this.state;
		// var picData = image.map(function(item, i) {
		// 	return <img key={i} src={`http://${item.pic}`}  style={{ width: '100%', height: '350px', position: 'absolute'}} />
		// });

	    return (
		    <Panel>
                <Cells>
		           	<div style={{ marginBottom: '10px', minHeight: '320px', background: '#ddd'}}>
		            {
		             	image.length>0?
		             	<Slider {...settings}>{image.map(function(item, i) {
		             		return <CellBody key={i}><img src={`http://${item.pic}`} style={{ minWidth:'100%', height: '350px' }} /></CellBody>
		             	})}</Slider>:null
		             		
		            }	 
		            </div>
		            <Cell>
		                <CellBody>
		                    {goods.name}
		                </CellBody>
		            </Cell>
		            
		            <Cell>
		                <CellBody style={{ color: 'orange', fontSize: '1.4em'}}>
		                    <span>￥</span>{goods.price}
		                </CellBody>
		            </Cell>
		             <Cell>
		                <CellBody>
		                   <Button type="warn" size="small">包邮</Button>
		                </CellBody>
		                 <CellFooter>
		                    广东广州
		                </CellFooter>
		            </Cell>
		        </Cells>
		    </Panel>
		);
	}
}

export default ProductInfo